<template>
<div>
    <!-- <div id="okms_top"></div> -->
    <div id="container" v-cloak>
        <div id="bg-img">
            <div class="bg-img posr">
                <form action="~/faq/morequestion">
                    <div class="header-search">
                        <input name="kw" type="text" placeholder="输入关键词" />
                        <input type="submit" value="检 索" />
                    </div>
                </form>


                <div class="person">
                    <p class="tc"><img v-bind:src="headimg" /> </p>
                    <p class="tc ft16">{{name}}</p>
                    <p class="tc ft16">{{position}}</p>
                    <p class="tc">

                        <router-link to="newquestion" class="ib" target="_blank">我要提问 </router-link>
                        </p>
                </div>
            </div>
        </div>
         <Navigation></Navigation>
        <div>
            <div class="wraplist01 clearfix mt60">
                <div class="fl list-left">
                    <div class="list-h2 clearfix">
                        <h2 class="h2-top fl h2-top01">最新问题</h2>
                        <router-link to="/MoreQuestion" class="more fr" target="_blank">                         
                        更多&gt;&gt;   
                        </router-link>
                    </div>
                    <div v-for="nq in newquestions" :key="nq.index">
                        <div class="clear mb10">
                            <div>
                                <p class="zhiD">
                                    <!-- <a class="h3 ellipsis f5f0" v-bind:title="nq.Title" v-bind:href="path + 'faq/QuestionDetail?qid='+nq.QuestionId" target="_blank">{{nq.Title}}</a> -->
                                     <router-link :to="{path:'QuestionDetail',query:{qid:nq.QuestionId}}" class="h3 ellipsis f5f0" target="_blank">{{nq.Title}}</router-link>
                                </p>
                                <span class="zhi-d" v-if="nq.IsTop"></span>
                            </div>
                            <p class="clearfix date">
                                <span class="fl">{{nq.CreateTime|datetime("YYYY-MM-DD HH:mm")}}</span>
                                <span class="fl">
                                    <img v-bind:src="nq.HeadImg" style="width: 25px" /> {{nq.RealName}}
                                </span>
                                <span class="fr">{{nq.AnswerNum}}个回答
                                    ({{changeTime(nq.latestAnswer.CreateTime)}})
                                   
                                    </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="fr list-right">
                    <div class="list-h2 clearfix">
                        <h2 class="h2-top fl h2-top02">热门问题</h2>
                        <a class="more fr" v-bind:href="path +'faq/MoreQuestion?sort=cdesc'" target="_blank">更多&gt;&gt;</a>
                    </div>
                    <div v-for="q in hotquestions" :key="q.index"> 
                        <div class="clearfix">
                            <div class="fl clearfix" style="width:76%">
                                <p class="zhiD">
                                    <a class="question ellipsis f5f0" v-bind:title="q.Title" v-bind:href="path + 'home/QuestionDetail?qid='+q.QuestionId" target="_blank">{{q.Title}}</a>
                                </p>
                                <span class="zhi-d mt" v-if="q.IsTop"></span>
                            </div>
                            <span class="fr c9 time-r">{{q.CreateTime|datetime("YYYY-MM-DD HH:mm")}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wraplist02 clearfix mt60">
                <div class="fl list-left">
                    <div class="list-h2 clearfix list-h2-border">
                        <h2 class="h2-top fl h2-top03">

                            <span v-for="(item,index) of listanswer " :key="index" :class="{active:isActive===index}" @click="changeclass(index)" >{{item}}</span>
                            
                        </h2>
                        <a class="more fr abox" v-bind:href="path + 'faq/MoreQuestion?type=2'" target="_blank">更多&gt;&gt;</a>
                        <a class="more fr abox hide" v-bind:href="path + 'faq/MoreQuestion?sort=adesc'" target="_blank">更多&gt;&gt;</a>
                    </div>
                    <div class="listbox">
                        <div v-for="no in noanswer" :key="no.index">
                            <div class="clearfix">
                                <div class="fl clearfix" style="width:76%">
                                    <p class="zhiD">
                                        <a class="question ellipsis f5f0" v-bind:title="(no.Title)" v-bind:href="path + 'faq/QuestionDetail?qid='+no.QuestionId" target="_blank">{{(no.Title)}}</a>
                                    </p>
                                    <span class="zhi-d mt" v-if="no.IsTop"></span>
                                </div>
                                <span class="fr c9 time-r">{{no.CreateTime|datetime("YYYY-MM-DD HH:mm")}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="listbox hide" >
                        <div v-for="hb in hotbottom" :key="hb.index">
                            <div class="clearfix">
                                <div class="fl clearfix" style="width:76%">
                                    <p class="zhiD">
                                        <a class="question ellipsis f5f0" v-bind:title="(hb.Title)" v-bind:href="path + 'faq/QuestionDetail?qid='+hb.QuestionId" target="_blank">{{(hb.Title)}}</a>
                                    </p>
                                    <span class="zhi-d mt" v-if="hb.IsTop"></span>
                                </div>
                                <span class="fr c9">{{hb.CreateTime}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fr list-right">
                    <div class="list-h2 clearfix">
                        <h2 class="h2-top fl h2-top04">热门标签</h2>
                    </div>
                    <div class="list-tab mt40">
                        <a  target="_blank" class="ib mr9" v-for="(tag,index) in hottags" :key="tag.index" v-bind:class="['cef8b89','ccba3ef','c95cdef','c70d5ef','cd5c3fb','cf4b997','c6cbbe9','ca5e362','cfbc73a'][index%9]">{{tag.TagName}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-box" id="okms_bottom"></div>
</div>
</template>
<script>


import '@/styles/faq/layout_app.css'

import { GetNewQuestions ,HotTags,GetHotQuestions,GetNoAnswerQuestions,GetHotAnswerQuestions} from '@/api/faq'
import {formatTime} from '@/utils/index'
import { format, render, cancel, register } from 'timeago.js';
import Navigation from "./navigation.vue";
export default ({
    name:'faqindex',
    components: {
    Navigation,
  },
    data(){ 

        return{
               headimg:'',
                name: '',
                position: '',
                newquestions:[],
                hotquestions: [],
                noanswer:[],
                hotbottom:[],
                hottags:[],
                path:"",
              
                listanswer:["待回答问题","热门回答"],
                isActive:0
        }
    },
      created() {
    this.fetchData();
    // this.gethottags();
    this.getHotQuestions();
    this.getnoAnswerQuestions();
   this.gethotAnswerQuestions();
  },
  methods: {

    fetchData() {
        
      this.listLoading = true
      GetNewQuestions().then(response => {
        
        this.newquestions = response
        console.log(response)
        this.listLoading = false
      })
    },
    getHotQuestions(){
     GetHotQuestions().then(response=>{
     this.hotquestions = response
     })
    },
    gethottags(){
        
         this.listLoading = true
         HotTags().then(response => {
         this.hottags=response
         this.listLoading = false
      })
    },
    getnoAnswerQuestions(){
         this.listLoading = true
      GetNoAnswerQuestions().then(response => {
          
         this.noanswer=response
        this.listLoading = false
      })
    },

getNavigation(){
         this.listLoading = true
      GetNavigation().then(response => {
          
         this.navigation=response
        this.listLoading = false
      })
    },
    
    gethotAnswerQuestions(){
        this.listLoading = true
       
    GetHotAnswerQuestions().then(response => {
       
        this.noanswer=response
        this.listLoading = false
      })
    },
      changeclass(i){
          debugger
          this.isActive=i;
          if(i==1){
          this.gethotAnswerQuestions();
          }
          if(i==0){
              this.getnoAnswerQuestions();
          }

      },
    changeTime(val){
          let time=new Date(val);
          return format(time,'zh_CN')
    
  },
   htmlDecode:function(str) {
                    //return ('<span/>').html(str).text();
                },
  
  },

})
</script>
<style scoped>

</style>